<template>
    <div>
      <Head></Head>
      <Banner
        :sightName="sightName"
        :bannerImg="bannerImg"
        :gallaryImgs="gallaryImgs"
      ></Banner>


      <div class="content">
        <List :list="list"></List>
      </div>
    </div>
</template>

<script>
  import Banner from "./components/Banner";
  import Head from "./components/Head";
  import List from "./components/List";
  import axios from "axios"
    export default {
        name: "Detail",
        components:{
          Banner,
          Head,
          List
        },
      data(){
        return{
          sightName:"",
          bannerImg:"",
          gallaryImgs:[],
          list:[]
          // list:[{
          //   "title": "成人票",
          //   "children": [{
          //     "title": "成人三馆联票",
          //     "children": [{
          //       "title": "成人三馆联票 - 某一连锁店销售",
          //       "children": [{
          //         "title": "成人四馆联票 - 某一连四级锁店销售"
          //       }]
          //     }]
          //   },{
          //     "title": "成人五馆联票"
          //   }]
          // }, {
          //   "title": "学生票"
          // }, {
          //   "title": "儿童票"
          // }, {
          //   "title": "特惠票"
          // }]
        }
      },
      methods:{
          getDetailInfo(){
            // axios("/static/data/detail.json?id="+this.$route.params.id)
            axios.get("/api/detail.json",{
              params:{
                id:this.$route.params.id
              }
            })
              .then(this.getDetailInfoSucc)
              .catch(function (e) {
                    console.log(e)
              })
          },
        getDetailInfoSucc(res){
            console.log(res)
            res=res.data
            if(res.ret && res.data){
              const data= res.data
              this.sightName=data.sightName
              this.bannerImg=data.bannerImg
              this.gallaryImgs=data.gallaryImgs
              this.list=data.categoryList
            }
        }
      },
      mounted() {
          this.getDetailInfo()
      },

    }
</script>

<style lang="stylus" scoped>
    .content
      height 50rem
</style>
